<template>
	<view class="select-option">
		<view class="select-title">
			{{title}}
		</view>
		<view v-for="item,index in data" class="select-list-item" 
		:class="{'select-active':selectIndex==index}" 
		:key="index"
		@click="clickItem(index)">
			{{item}} {{unit?unit:''}}
		</view>
	</view>
</template>

<script>
	/**
	 * SelectList 单选团期list ( 后期需改为日历版 )
	 * @description 团期列表
	 * @property {Array} data 团期月份/日期数据
	 * @property {String} unit 单位日/月
	 * @property {String} title 团期标题 出发月份/出发日期
	 * @event {Function} getSelect 获取选中的下标值
	 * @example <select-list unit="月" title="出发月份">
	 */
	import uniBadge from '@/components/uni-badge/uni-badge.vue';
	export default{
		name:"selectList",
		components: {
			uniBadge
		},
		props: {
			data:{
				type:Array,
				default:()=>{
					return [1,2,3]
				}
			},
			unit:{
				type:String,
				default:"日"
			},
			title:{
				type:String,
				default:"出发日期"
			}
		},
		data() {
			return {
				selectIndex:0
			}
			
		},
		methods: {
			clickItem(index){
				this.selectIndex=index;
			},
			getSelect(){
				return this.selectIndex;
			}
		}
	}
</script>

<style>
	.select-option{
		margin: 20rpx 0;
	}
	.select-list-item{
		border:1px solid #a2a2a2;
		color: #a2a2a2;
		display: inline-block;
		padding: 0 20rpx;
		width: auto;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
	.select-title{
		border-bottom: 1px solid #c5c5c5;
		margin-bottom: 15rpx;
		padding-bottom: 5rpx;
	}
	.select-active{
		color: #FF0000;
		border-color: #FF0000;
	}
</style>
